<template>
  <div class="main-wrap">
    <navigators :back-text="back" :bg-color="bgColor"></navigators>
    <div class="main-banners" :style="{height:heights+'px'}">

      <yd-slider direction="vertical">
        <yd-slider-item>

            <img src="../assets/images/banner/1.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/2.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>
          <div class="sliders-con" :style="{height:heights+'px'}" @touchstart="getStart($event)" @touchend="getMove($event)">
            <ul class="list-con" :style="{left:lefts+'rem'}">
              <li v-for="(items,index) in imgArrays">
                <div class="img-pare-con" @click="changeImg($event,items.id)" >
                    <img :src="items.urls" alt="" class="flip" :class={out:items.isOn,in:!items.isOn}>
                    <img :src="items.urlOn" alt="" class="flip" :class={out:!items.isOn,in:items.isOn}>
                </div>

              </li>
              <li v-show="isShow">
                <div class="img-pare-con">
                   <img src="../assets/images/banner/ban00.jpg" class="img-classes" alt="">
                </div>

              </li>

            </ul>

          </div>
        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/4.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/5.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/6.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/7.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>
          <div class="sliders-con-btm">

            <yd-slider autoplay="3000" class="yl-slider-con">
              <yd-slider-item>

                  <img src="../assets/images/banner/bg_jw.png" :style="{height:heights*.76+'px'}">

              </yd-slider-item>
              <yd-slider-item>
                <img src="../assets/images/banner/bg_cy.png" :style="{height:heights*.76+'px'}">
              </yd-slider-item>

            </yd-slider>

          </div>
        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/9.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
        <yd-slider-item>

            <img src="../assets/images/banner/10.jpg" :style="{height:heights+'px'}">

        </yd-slider-item>
      </yd-slider>
    </div>

  </div>
</template>

<script>
  import navigators from '../components/headers.vue';
  import {method} from '../utils/index'
  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        back:"返回",
        bgColor:'none',
        startX:0,
        startY:0,
        lefts:0,
        idx:0,
        isShow:false,
        imgArrays:[{
          id:0,
          urls:require("../assets/images/banner/ban00.jpg"),
          urlOn:require("../assets/images/banner/ban000.jpg"),
          isOn:false
        },
          {
            id:1,
            urls:require("../assets/images/banner/ban01.jpg"),
            urlOn:require("../assets/images/banner/ban010.jpg"),
            isOn:false
          },
          {
            id:2,
            urls:require("../assets/images/banner/ban02.jpg"),
            urlOn:require("../assets/images/banner/ban020.jpg"),
            isOn:false
          },
          {
            id:3,
            urls:require("../assets/images/banner/ban03.jpg"),
            urlOn:require("../assets/images/banner/ban030.jpg"),
            isOn:false
          }]
      }
    },
    created(){
       this.checkedIsMobile();
    },

    mounted(){
      this.updateHeight();
    },
    updated(){

    },
    methods:{
        checkedIsMobile(){

            window.location.href=method.isMobile() ? "http://www.ontsoft.cn/m" :"http://www.ontsoft.cn";

        },
       updateHeight(){
         var now=new Date().getTime(),untils=new Date("2018-04-30").getTime(),
           _cTime=now-untils;
         if(method.isPhone() && _cTime>0){
           this.heights=window.innerHeight*100;
         }
       },
      getStart(e){
        var vm=this;
        vm.startX = e.changedTouches[0].pageX;
        vm.startY = e.changedTouches[0].pageY;


      },
      getMove(e){

        var vm=this,
            endX = e.changedTouches[0].pageX,
            endY = e.changedTouches[0].pageY,
            disX  = endX - vm.startX,
            disY = endY - vm.startY,
           len=vm.imgArrays.length;
        if(Math.abs(disX) > Math.abs(disY) && disX > 50){
          vm.idx--;
          if(vm.idx<0){
            vm.idx=0;
          }
          vm.showIndex(vm.idx);
        }else if(Math.abs(disX) > Math.abs(disY) && disX < -50){
          vm.idx++;
          if(vm.idx>len-1 ) {
            vm.idx=0;
          }
          vm.isShow=vm.idx==len-1 ? true : false;
          vm.showIndex(vm.idx);


        }else if(Math.abs(disX) < Math.abs(disY) && disY < -50){
          console.log('往上滑动');
        }else if(Math.abs(disX) < Math.abs(disY) && disY > 50){
          console.log('往下滑动');
        }
      },
      showIndex(idx){
        this.lefts=idx*(-9.8);
      },
      changeImg(e,i){
          var vm=this,
              _src=e.target.src,
              _idx=_src.indexOf(".jpg"),
              _nIdx=_src.substring(0,_idx).indexOf(".");

          vm.imgArrays.forEach((items,index)=>{

            items.isOn = (i==items.id) ?  !items.isOn : false;

          })
      }
    },
    components:{
      navigators
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../css/index.css";
  @import "../css/animate.css";
</style>


